import Taro, {Component, Config} from '@tarojs/taro'
import {observer, inject} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {Form, View, Textarea, Input, Button, Picker, Image} from '@tarojs/components'

import {getRuntime,educationArr,workExperienceArr,monthlyPayArr,
typeOfJobArr} from '../../utils/common'


import './index.less'
import right from '../../assets/img/right.png'
import {toJS} from "mobx";

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Position extends Component<IHomeProps> {

  state = {
    publicationType: '3', // 发布类型 1需求
    description: '', // 职位简介
    positionName:'', // 招聘标题
    recruitmentArr: Array.from(Array(100), (v, k) => k).filter(item => item>0), //招聘人数
    recruitment: 1, //招聘人数
    educationArr:educationArr, //学历
    education:educationArr[0], //学历
    workExperienceArr:workExperienceArr, //工作经验
    workExperience:workExperienceArr[0], //工作经验
    technicalTitleArr:[], //技术职称（简历职称）
    technicalTitle:'', //技术职称（简历职称）
    technicalTitleId: 0,
    monthlyPayArr: monthlyPayArr, //月薪（期望薪资）
    monthlyPay: monthlyPayArr[0], //月薪（期望薪资）
    jobNatureArr:typeOfJobArr, //工作性质
    jobNature:typeOfJobArr[0], //工作性质
    address:'',
    loading: false,
    disabled: false,
    submitText: '立即发布',
    allProvince:[],
    allCity:[],
    allDistract:[],
    provinceIndex: 0,
    cityIndex: 0,
    distractIndex: 0,
    area:'请选择',
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '发布职位'})
    this.getAllProvince()
    this.getAllCity(0)
    this.getAllDistract(0,0)
    this.getAllTechnicalTitle()
  }

  getAllTechnicalTitle() {
    let { TalentStore } = this.props.stores
    TalentStore.getAllTechnicalTitle({
      callback: res => {
        let resArr = toJS(res)
        console.log(resArr)
        this.setState({
          technicalTitleArr: res.items || [],
          technicalTitle: res.items[0]['titleName'] || '',
          technicalTitleId: res.items[0]['id'] || '',
        })
      }
    })
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        })
      }
    })
  }

  getAllCity(index:number=0) {
    let { AreaStore } = this.props.stores
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        //console.log(res)
        this.setState({
          allCity: res
        })
      }
    })
  }
  getAllDistract(indexProvince:number=0,indexCity:number=0) {
    let { AreaStore } = this.props.stores
    AreaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        //console.log(res)
        this.setState({
          allDistract: res
        })
      }
    })
  }
  changeArea = e => {
    let { allProvince,allCity,allDistract,provinceIndex,cityIndex,distractIndex } = this.state
    this.setState({
      area: allProvince[provinceIndex]['label']+allCity[cityIndex]['label']+allDistract[distractIndex]['label']
    })
  }
  // 普通选择器
  changePicker(type:string, e) {
    this.setState({
      [type]: this.state[type+'Arr'][e.detail.value]
    })
  }

  // 职称选择
  changeTechnical(e){
    let index = e.detail.value || 0
    let { technicalTitleArr: t } = this.state
    this.setState({
      technicalTitle: t[index]['titleName'],
      technicalTitleId:t[index]['id']
    })
  }
  // 地址选择
  onColumnChange(e) {
    // console.log(e.detail)
    let {column,value} = e.detail
    if(column===0){ // 选择省
      this.getAllCity(value)
      this.getAllDistract(value,0)
      this.setState({
        provinceIndex: value
      })
    }
    if (column===1){
      this.getAllDistract(this.state.provinceIndex,value)
      this.setState({
        cityIndex: value
      })
    }
    if (column===2){
      this.setState({
        distractIndex: value
      })
    }
  }
  formSubmit(e) {
    const {homeStore} = this.props.stores
    let {publicationType} = this.state
    let { recruitment,education,workExperience,monthlyPay,jobNature,area,technicalTitleId } = this.state
    let {positionName, address, description } = e.detail.value
    if (!positionName) {
      getRuntime().showToast('招聘标题不能为空~')
      return
    }
    if (!recruitment) {
      getRuntime().showToast('招聘人数不能为空~')
      return
    }
    if (!monthlyPay) {
      getRuntime().showToast('月薪不能为空~')
      return
    }
    if (!description) {
      getRuntime().showToast('职位简介不能为空~')
      return
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    homeStore.saveUserInfomations({
      form: {
        publicationType,positionName,recruitment,education,workExperience,technicalTitleId,monthlyPay,jobNature,address: area, description
      },
      callBack: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        })
        getRuntime().showToast('数据提交成功~')
        setTimeout( () => {
          getRuntime().navigateTo('/pages/newest/index')
        },2000)
      }
    })
  }
  render() {
    let { recruitment,recruitmentArr, education,educationArr, workExperience,workExperienceArr, technicalTitle,technicalTitleArr,
      monthlyPay,monthlyPayArr,jobNature,jobNatureArr,loading,disabled,submitText,allProvince,allCity,allDistract,area } = this.state
     return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
          <View className='item-group-title'>－ 招聘信息 －</View>

          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>招聘标题</View>
              <Input className='from-input' placeholder='请填写招聘标题(例：一级建造师)' placeholderClass='placeholder_class' name='positionName' />
            </View>

            <View className='input-group '>
              <View className='input-name is-require'>招聘人数</View>
              <Picker className='input-picker' mode='selector' name='recruitment' range={recruitmentArr} onChange={this.changePicker.bind(this,'recruitment')}>
                <View className='tt'>
                  <View className='from-input picker-con' >{recruitment}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name is-require'>要求学历</View>
              <Picker className='input-picker' mode='selector' name='education' range={educationArr}  onChange={this.changePicker.bind(this,'education')}>
                <View className='tt'>
                  <View className='from-input picker-con' >{education}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group pb0'>
              <View className='input-name'>工作经验</View>
              <Picker className='input-picker' mode='selector' range={workExperienceArr} name='workExperience' onChange={this.changePicker.bind(this,'workExperience')}>
                <View className='tt'>
                  <View className='from-input picker-con' >{workExperience}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>


            <View className='input-group '>
              <View className='input-name'>职称</View>
              <Picker className='input-picker' mode='multiSelector' name={'technicalTitle'} range={[technicalTitleArr]} rangeKey={'titleName'} onChange={this.changeTechnical.bind(this)}>
                <View className='tt'>
                  {technicalTitle&& <View className='from-input picker-con' >{technicalTitle}</View>}
                  {!technicalTitle&& <View className='from-input picker-con' >请选择</View>}
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name is-require'>月薪</View>
              <Picker className='input-picker' mode='selector' name={'monthlyPay'} range={monthlyPayArr} onChange={this.changePicker.bind(this,'monthlyPay')}>
                <View className='tt'>
                  <View className='from-input picker-con' >{monthlyPay}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>工作性质</View>
              <Picker className='input-picker' mode='selector' name={'jobNature'} range={jobNatureArr} onChange={this.changePicker.bind(this,'jobNature')}>
                <View className='tt'>
                  <View className='from-input picker-con' >{jobNature}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>工作地点</View>
              <Picker className='input-picker' mode='multiSelector' name={'address'} range={[allProvince,allCity,allDistract]} rangeKey={'label'}
                      onChange={this.changeArea.bind(this)}
                      onColumnChange={this.onColumnChange.bind(this)}
              >
                <View className='tt'>
                  <View className='from-input picker-con' >{area}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>
          </View>
          <View className='item-group-title'>－ 职位简介 －</View>
          <View className='input-group'>
          <Textarea className='from-textarea' placeholderClass='placeholder-class'
                    placeholder='请详细填写招聘职位的要求和内容(必填)'
                    maxlength={-1}
                    name='description'
          />
          </View>

          <Button className='from-submit' formType="submit" loading={loading} disabled={disabled}>{submitText}</Button>
        </Form>

        <View className='footer-block' />
      </View>
    )
  }
}

export default Position
